<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>榜单冲刺</title>
    <script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.js"></script>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
    <script src="${ctx}/js/changeSize.js"></script>
    <script src="${ctx}/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.mobile.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }
    .day_rank {
        width: 100%;
        padding-bottom: 7.5rem;
        background-color: #F06865;
    }

    .bg{
        position: absolute;
        left: 0;
        right: 0;
        height: 100%;
        overflow: hidden;
        background: #4ACA98;
    }
    .bg img{
        width: 100%;
    }
    .detail {
        position: relative;
        z-index: 1;
    }
    .page_title {
        /*padding: 0.5rem 0;*/
        padding-top:1rem;
        color: #fff;
        font-size: 1.12rem;
        text-align: center;
    }
    .page_title div{
        width: 100%;
        position: relative;
        height: 2.2rem;
    }
    .page_title span{
        position: absolute;
        top: 0;
        right: 0.5rem;
        line-height: 2.2rem;
        font-size: 0.88rem;
        color: #666666;
    }
    .page_title p{
        line-height: 2.2rem;
        color: #343434;
    }
    .go_back{
        width: 1rem;
        height: 1rem;
        position: absolute;
        left: 0.5rem;
        top: 50%;
        margin-top: -0.5rem;
    }
    .set_header {
        background:linear-gradient(to bottom right,#E1514E,#F06865);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    .time {
        text-align: center;
        margin-top: 5.7rem;
        height: 1.2rem;
        padding-bottom: 4.7rem;
    }
    .time span{
        display: inline-block;
        padding: 0.1rem 0.75rem;
        border-radius: 0.7rem;
        text-align: center;
        color: #4ACA98;
        background: #DEFDEF;
        line-height: 1.2rem;
        font-size: 0.75rem;
        font-weight: 400;
    }
    .rank_sort{
        padding: 1rem 0.5rem 1rem;
        background: #fff;
        width: 88%;
        margin: auto;
        border-radius: 0.5rem;
    }
    .rank_box{
        margin: 0 auto;
        position: relative;
    }

    .list_box {
        border-radius: 0.2rem;
        padding-bottom: 1rem;
    }

    .list_box .tit{
        font-size: 0.75rem;
        text-align: center;
        line-height: 3.5rem;
        color: #fff;
        font-weight: 500;
        letter-spacing: 0.05rem;
    }

    .bottom_bg {
        position: absolute;
        z-index: 1;
        left:0;
        right: 0;
        bottom: -0.4rem;
    }
    .bottom_bg img{
        width: 100%;
    }
    .rank_item {
        width: 5.4rem;
        text-align: center;
    }
    .rank_item .name{
        color: #343434;
        font-size: 0.8rem;
        font-weight: 400;
    }


    .rank_item .explain{
        color: #F28E0E;
        border-radius: 0.2rem;
        font-size: 0.6rem;
        font-weight: 400;
        width: 4.7rem;
        margin: auto;
        display: block;
        overflow: hidden;
        word-break: keep-all;
        text-overflow: ellipsis;
        line-height: 1.5rem;
    }

    .rank_item:first-child{
        padding-top: 3rem;
    }
    .rank_item:first-child .ranking{
        padding-top: 1.2rem;
        font-weight: 500;
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.48);
    }

    .rank_item:first-child .money{
        font-weight: 500;
        font-size: 0.77rem;
        color: #fff;
        line-height: 2rem;
    }

    .rank_item:nth-child(2) {
        padding-top: 0.9rem;
    }
    .rank_item:nth-child(2) .money{
        font-weight: 500;
        font-size: 0.82rem;
        color: #fff;
        line-height: 2.7rem;
    }
    .rank_item:nth-child(2) .ranking{
        padding-top: 1.7rem;
        font-weight: 500;
        font-size: 2.5rem;
        color: rgba(255, 255, 255, 0.48);
    }

    .rank_item:nth-child(3){
        padding-top: 3.7rem;
    }
    .rank_item:nth-child(3) .ranking{
        padding-top: 1.2rem;
        font-weight: 500;
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.48);
    }

    .rank_item:nth-child(3) .money{
        font-weight: 500;
        font-size: 0.77rem;
        color: #fff;
        line-height: 1.5rem;
    }


    .week_item:first-child {
        background: url("${ctx}/image/rank/list1.png")no-repeat;
        background-size: 100% auto;
    }
    .week_item:nth-child(2) {
        background: url("${ctx}/image/rank/list2.png")no-repeat;
        background-size: 100% 100%;
    }

    .week_item:nth-child(3) {
        background: url("${ctx}/image/rank/list3.png")no-repeat;
        background-size: 100% 100%;
    }

    .rank_item img{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 100%;
        margin-right: 0.3rem;
    }


    .rank_item:nth-child(n+2) span{
        line-height: 0.8rem;
        display: inline-block;
        white-space: nowrap;
        animation: 20s wordsLoop linear infinite normal;
    }

    @-webkit-keyframes wordsLoop {
        0% {
            transform: translateX(0);
            -webkit-transform: translateX(0);
        }
        100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
    }

    .rank_person {
        display: flex;
    }
    .rank_person div{
        flex: 1;
    }
    .rank_person img{
        width: 100%;
    }


    .sort .title {
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: -2.5rem;
        margin: 0 auto 0.5rem;
    }
    .sort .title img{
        width: 64%;
        margin: auto;
        display: block;
    }
    .sort .title span{
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 1.8rem;
        font-size: 0.9rem;
        color: #fff;
        margin: auto;
    }
    .sort .title .history{
        text-align: center;
        margin: 0.5rem auto;
        background: url(${ctx}/image/rank/title_bg.png)no-repeat;
        background-size: 100% 100%;
        padding: 0.4rem 1rem 0.2rem 1rem;
        font-size: 0.83rem;
        width: 10rem;
        color: #c77717;
    }
    .sort .title a{
        display: block;
        margin-top: 0.5rem;
        color: #fbc354;
        font-size: 0.75rem;
        text-decoration: underline;
    }

    .sort_box {
        border-radius: 0.2rem;
        font-size: 0.78rem;
        border: 1px solid #00D884;
    }
    .table_header {
        display:flex;
        font-size: 0.7rem;
        background: #D6F9EB;
        border-top-left-radius: 0.3rem;
        border-top-right-radius: 0.3rem;
        height: 2.5rem;
        margin: auto;
        align-items: center;
    }
    .table_header span{
        color: #4ACA98;
        display: inline-block;
        font-weight: 500;
        text-align: center;
        font-size: 0.75rem;
    }
    .percent_one{
        width: 14%!important;
    }
    .percent_three{
        width: 31%!important;
    }
    .percent_two{
        width: 24%!important;
        /*color: #FF6030;*/
    }
    .table_body {
        margin-top: 0.3rem;
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .table_line{
        display: flex;
        position: relative;
        padding: 0.6rem 0;
        font-weight: 400;
    }
    .myself{
        padding: 0.9rem 0;
    }
    .message {
       /* font-size:0.5rem;*/
        color: #9A9A9A;
        position: absolute;
        right: 0.2rem;
        bottom: 0.2rem;
    }
    .sort_index {
        color: #666;
    }
    .table_line .avatar{
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 2px;
    }
    .person_record {
        /*background: #FCEFD2*/
        /*border: 1px solid #EFE3CC;*/
        padding: 1rem 0;
    }

    .table_item {
        box-sizing: border-box;
        text-align: center;
        padding: 0 0.2rem;
    }
    .normal{
        color: #666
    }
    .reward {
        color: #FF6030;
    }
    .total {
        color: #343434;
        font-weight: 400;
        background: rgba(241,142,14,0.07)
    }
    .earn p {
        /*font-size: 0.63rem;*/
    }
    .earn p:first-child{
        padding-bottom: 0.3rem;
    }
    .earn p:last-child{
        font-size: 0.5rem;
        margin-top: 0.2rem;
        width: 36%;
        margin: 0 auto;
    }
    .add_more {
        width: 6rem;
        margin: 0.7rem auto 0;
        text-align: center;
        line-height: 1.5rem;
        /*border: 1px solid #FF6030;*/
        color: #ccc;
        text-decoration: underline;
        font-size: 0.7rem;
        font-weight: 400;
    }
    .no_more {
        text-align: center;
        color: #bbb;
        font-size: 0.63rem;
        line-height: 1rem;
        padding: 0.8rem 0;
    }
    .rule_box {
        margin-top: 1.5rem;
        padding: 0 0.8rem;
    }
    .rule_box .title{
        text-align: center;
        margin-bottom: 0.5rem;
        position: relative;
    }
    .rule_box .title span::before{
        content: '';
        width: 4rem;
        height: 1rem;
        background: url(${ctx}/image/rank/ymarrow.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: 0.5rem;
        left: 2.5rem;
        transform: rotateY(180deg);
    }
    .rule_box .title span::after{
        content: '';
        width: 4rem;
        height: 1rem;
        background: url(${ctx}/image/rank/ymarrow.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: 0.5rem;
        right: 2.5rem;
    }

    .rule_box .title img{
        width: 50%;
    }
    .rule_detail {
        padding-bottom: 0.2rem;
        padding-top: 1rem;
        background: #FFF6E5;
        border-radius: 0.5rem;
        background: rgba(0,0,0,0.1);
        color: #fff;
    }
    .rule{
        font-size:0.75rem ;
        padding:0 0.5rem;
        margin-bottom: 1rem;
    }
    .rule .rule_name{
        display: block;
        margin-top: 0.2rem;
        /* background: url(/image/rank/btn_bg.png)no-repeat; */
        background-size: 100% auto;
        width: 4.5rem;
        height: 2rem;
        line-height: 1.8rem;
        box-sizing: border-box;
        padding-left: 0.9rem;
        /*color: #666666;*/
        font-weight: 600;
        font-size: 0.75rem;
    }

    .rule div{
        padding: 0 0.9rem;
        font-size: 0.7rem;
        font-weight: 400;
        /*color: #666;*/
    }

    .rule div p{
        line-height: 1.2rem;
        text-align: justify;
    }

    .bottom_btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 7rem;
        /* background: #F06865; */
        padding: 0.5rem;
        z-index: 10;
    }
    .bottom_btn span{
        display: block;
        width: 40%;
        background: url(/image/rank/ymbtn.png) no-repeat;
        background-size: 100%;
        /* border-radius: 1.2rem; */
        color: #fff;
        text-align: center;
        font-size: 1.12rem;
        height: 7rem;
        line-height: 3rem;
        margin: auto;
    }
    .suspension{
        position: fixed;
        z-index: 10;
    }

    .change_btn {
        right: 0.5rem;
        bottom: 5rem;
    }
    .change_btn img{
        width:4rem ;
    }
    .count_down {
        right: 0.3rem;
        bottom: 5rem;
        width: 3.5rem;
    }
    .count_down div{
        position: relative;
    }
    .count_down img{
        width: 100%;
    }
    .count {
        position: absolute;
        bottom: 0.9rem;
        left: 0;
        right: 0;
        color: #fffc;
        text-align: center;
        font-size: 0.55rem;
    }
    .show_box{
        height: 2.8rem;
        padding: 0 0.5rem;
        position: relative;
    }
    .show_box .bg{
        width: 98%;
        position: absolute;
        left: 0.2rem;
        z-index: -1;
    }
    .btn_typebox{
        display: flex;
        height: 100%;
        justify-content: space-evenly;
        color: #FF6D02;
        font-size: 0.75rem;
        text-align: center;
        line-height: 2rem;
        font-weight: 500;
    }
    .btn_typebox div{
        width: 40%;
        height: 2rem;
        margin-top: 0.216rem;
        border-radius: 1rem;
        background: #40B589;
        color: #fff;
    }
    .btn_typebox .act{
        color: #4ACA98;
        background: #fff;
    }
    .podium_box{
        width: 16.7rem;
        height: 10.7rem;
        background: url(/image/rank/podium2.png) no-repeat;
        background-size: 100%;
        margin: auto;
        padding: 0.3rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        background-position-y: bottom;
    }
    .history{
        text-align: center;
        font-size: 0.7rem;
        color: #4ACA98;
        display: block;
        text-decoration: underline;
        font-weight: 400;
        padding-top: 0.8rem;
        padding-bottom: 0.3rem;
    }
    .show_box::before{
        content: '今日赚钱TOP 20';
        color: #FFB200;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: -9rem;
        margin: auto;
        font-size: 0.7rem;
        font-weight: 400;
    }
</style>
<body>
<div id="app">
    <div class="day_rank" v-cloak>
        <div  class="bg">
            <img src="${ctx}/image/rank/ymbg.png">
        </div>
        <div class="detail">
            <div class="page_title" id="title" :class="{'set_header':isChange}">
                <div>
                    <img src="${ctx}/image/zuo_white.png" class="go_back" @click="comeback">
                    <p>榜单冲刺</p>
                    <span @click="getRule()">榜单攻略</span>
                </div>
            </div>
            <div class="time">
                <span v-show="activityTime">活动时间：{{activityTime}}</span>
            </div>
            <div class="show_box">
<#--                <img class="bg" src="${ctx}/image/rank/wltypebg.png">-->
                <div class="btn_typebox">
                    <div :class="typeIndex===0?'act':''" @click="changeType(0)">日榜</div>
                    <div :class="typeIndex===1?'act':''" @click="changeType(1)">周榜</div>
                </div>
            </div>
            <div class="rank_sort">
                <div class="rank_box">
                    <div class="list_box">
                        <div class="podium_box">
                            <div class="rank_item">
                                <div class="name" v-if="rankList.length>1">{{rankList[1].name}}</div>
                                <label class="explain" v-if="rankList.length>1">累计赚取{{rankList[1].score?rankList[1].score/100:0}}元</label>
                                <p class="ranking">2</p>
                                <div class="money" v-if="typeIndex==0"><p v-if="rankList.length>1" >获奖{{rankList[1].money/100}}元</p></div>
                                <div class="money" v-else><p v-if="rankList.length>1" >获奖{{rankList[1].money/100}}元</p></div>
                            </div>
                            <div class="rank_item">
                                <div class="name" v-if="rankList.length!=0">{{rankList[0].name}}</div>
                                <label class="explain" v-if="rankList.length!=0">累计赚取{{rankList[0].score?rankList[0].score/100:0}}元</label>
                                <p class="ranking">1</p>
                                <div class="money" v-if="typeIndex==0"><p v-if="rankList.length!=0">获奖{{rankList[0].money/100}}元</p></div>
                                <div class="money" v-else><p v-if="rankList.length!=0">获奖{{rankList[0].money/100}}元</p></div>
                            </div>
                            <div class="rank_item">
                                <div class="name" v-if="rankList.length>2">{{rankList[2].name}}</div>
                                <label class="explain" v-if="rankList.length>2">累计赚取{{rankList[2].score?rankList[2].score/100:0}}元</label>
                                <p class="ranking">3</p>
                                <div class="money" v-if="typeIndex==0"><p v-if="rankList.length>2">获奖{{rankList[2].money/100}}元</p></div>
                                <div class="money" v-else><p v-if="rankList.length>2">获奖{{rankList[2].money/100}}元</p></div>
                            </div>
                        </div>
                        <a class="history" @click="gotoHistory()">查看历史排行</a>
                    </div>
                    <#--                <div class="bottom_bg">-->
                    <#--                    <img src="${ctx}/image/rank/bottom.png">-->
                    <#--                </div>-->
                </div>
                <div class="sort">
                    <div class="sort_box">
                        <div class="table_header">
                            <span class="percent_one">排名</span>
                            <span class="percent_three">昵称</span>
                            <span class="percent_two">奖励</span>
                            <span class="percent_three">今日赚取</span>
                        </div>
                        <div class="table_body">
                            <#-- 未上榜用户 -->
                            <div class="total table_line" v-if="myInfo&&(myInfo.sort>maxData||myInfo.sort=='100+')">
                                <div class="table_item percent_one">{{myInfo.sort}}</div>
                                <div class="table_item percent_three">{{myInfo.name}}</div>
                                <div class="table_item percent_two">{{myInfo.money?myInfo.money/100:'—'}}</div>
                                <div class="table_item percent_three earn">
                                    <p>{{myInfo.score?myInfo.score/100:0}}元</p>
                                    <p class="message">{{myInfo.msg}}</p>
                                </div>
                            </div>
                            <#-- 上榜用户 -->
                            <div class="table_line" :class="{'person_record':myInfo.sort==item.sort}" v-for="(item,index) in rankList">
                                <div class="table_item percent_one">
                                    <i class="sort_index" >{{index+1}}</i>
                                </div>
                                <div class="table_item percent_three">
                                    <span class="normal">{{item.name}}</span>
                                </div>
                                <div class="table_item percent_two">
                                    <div class="reward">{{item.money|score}}</div>
                                </div>
                                <div class="table_item percent_three earn">
                                    <span class="normal">{{item.score?item.score/100:0}}元</span>
                                    <p v-if="item.sort<maxData&&item.sort==myInfo.sort&&myInfo.score!=0" class="message">{{myInfo.msg}}</p>
                                </div>
                            </div>

                            <#--                        <div class="no_more" @click="addMore()">没有排名啦~</div>-->
                        </div>
                    </div>
                    <div class="add_more" @click="addMore()">查看更多</div>
                </div>
            </div>

            <div class="rule_box">
                <div class="rule_detail">
                    <div class="title">
                        <span>活动规则</span>
                    </div>
                    <div class="rule">
                        <span class="rule_name">活动时间</span>
                        <div>{{startDay}} ~ {{endDay}}</div>
                    </div>
                    <div class="rule">
                        <span class="rule_name">活动范围</span>
                        <div>
                            <p>活动期间完成[果果有钱]内任意红包类型任务</p>
                        </div>
                    </div>
                    <div class="rule">
                        <span class="rule_name">奖励说明</span>
                        <div>
                            <p>在活动期间内，完成任意红包类型任务累计赚取金额进行排名，前20名的用户可以获得对应奖励（排行越前奖励越高，奖励不叠加）</p>
                            <#--                            <p>·累计赚取金额=做任务所获得的的所有红包奖励金额</p>-->
                        </div>
                    </div>
                    <div class="rule">
                        <span class="rule_name">领取方式</span>
                        <div>活动结束后登陆领取</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom_btn" @click="getTask()">
            <span></span>
        </div>

    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            rankList: [],
            typeIndex:0,
            startDay:'',
            endDay:'',
            score:0,
            getting: false,
            get_time:86400,
            activityTime: '',
            myInfo:{},
            current:1,
            userInfo:{},
            deadline:'',
            money:'',
            maxData:0,
            hasMore:false,
            isChange:false,
            hasrecord:0,
            checked:true,
            isDay:'',
            isWeek:'',
            rewardConfig:{}
        },
        created: function () {
            // 将subscanQRCallBack方法绑定到window下面，提供给外部调用
            // window.addEventListener('scroll', this.onScroll)
            if (this.isDay&&this.isWeek){
                window.changeType = this.changeType;
            }
            var dates = this.getCurrentTime(new Date()).split(' ')
            this.startDay = dates[0]+'  00:00';
            this.endDay = dates[0]+'  23:59';
        },

        mounted: function () {

            // window.receivePrize=this.receivePrize;
            // window.scrollToRank=this.scrollToRank;
            // window.setTips = this.setTips;
            // // 判断周、日榜关闭情况
             this.checkRank();
            //this.getRewardMoney();
            // this.getRank(1);
            // 设置标题栏距离顶部距离
            // var height = window.xy_web.getStatusBarHeight();
            // window.xy_web.showAndHideRankTitleBar(true);
        },
        methods: {
            // 获取列表信息
            getRank: function (val) {
                var that = this;
                var header = window.xy_web.getNetHeader();
                window.xy_web.showLoading();
                $.ajax({
                    url: '/ranking/day',
                    type: 'post',
                    data: {page:val,t:that.typeIndex==0?0:1},
                    async: true,
                    headers: JSON.parse(header),
                    dataType: "json",
                    success: function (res) {
                        window.xy_web.dismissLoading();
                        if (res.success) {
                            if (res.data.data) {
                                var list = that.rankList;
                                list ? list = list.concat(res.data.data) : list = res.data.data;
                                that.rankList = list;
                            }
                            that.hasMore = res.data.data&&res.data.data.length!=0;
                            that.startDay = res.data.star;
                            that.endDay = res.data.end;
                            that.activityTime = res.data.star&&res.data.end?(res.data.star +'~'+ res.data.end):'';
                            that.score = res.data.myScore;
                            that.myInfo = res.data.my;
                            that.maxData = res.data.maxSort?res.data.maxSort:0;
                            that.money=res.data.sbcount?parseFloat(res.data.sbcount).toFixed(2):'';
                            that.userInfo = res.data.record;
                            that.hasrecord=res.data.hasrecord;
                            // if (res.data.hasrecord>0) {
                            //  // 奖励过期时间
                            //     that.deadline = that.transformTime(new Date(that.userInfo.createTime + 24*60*60*1000))
                            // }
                        }else {
                            layer.msg(res.message);
                        }
                    },
                    error: function () {
                        window.xy_web.dismissLoading();
                    }
                });
            },

            checkRank: function(){
                var that = this;
                var header = window.xy_web.getNetHeader();
                $.ajax({
                    url: '/ranking/check/rank',
                    type: 'post',
                    data: {},
                    async: true,
                    headers: JSON.parse(header),
                    // headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"91ea601eb3814402af6731b0138bcffa","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        if (res.success) {
                            that.checked =res.data.ribang&&res.data.zhoubang;
                            that.isDay = res.data.ribang;
                            that.isWeek = res.data.zhoubang;
                            if (res.data.ribang) {
                                that.typeIndex = 0;
                                that.getRank(1);
                            }else {
                                that.typeIndex = 1;
                                that.getRank(1);
                            }
                        }else {
                            layer.msg(res.message);
                        }
                    },
                });
            },

            openDialog:function(){
                var that = this;
                if(that.userInfo.type===1){
                    window.xy_web.showRewardDialog("获得"+that.userInfo.date.substring(that.userInfo.date.length-2)+"日日榜第"+that.userInfo.memberSort+"名奖励",that.userInfo.money/100);
                }else {
                    window.xy_web.showRewardDialog("获得上周周榜第"+that.userInfo.memberSort+"名奖励",that.userInfo.money/100);
                }

            },

            // 榜单攻略
            getRule:function(){
                window.xy_web.showRulesDialog();
            },

            // 抢榜
            getTask: function (){
                window.xy_web.showTaskDialog();
            },

            // 返回上一页
            comeback: function () {
                window.xy_web.closePage();
            },

            setTips(){
                if(this.myInfo){
                    return {
                        earnMoney:this.myInfo.money?this.myInfo.score/100:0,
                        sort:this.myInfo.sort?this.myInfo.sort:'100+',
                        message:this.myInfo.msg,
                        type:this.typeIndex
                    }
                }else {
                    return {
                        earnMoney:0,
                        sort:'100+',
                        message:'您当前未上榜',
                        type:this.typeIndex
                    }
                }
            },

            // 领取奖励
            receivePrize:function(e){
                var that = this;
                var header = window.xy_web.getNetHeader();
                window.xy_web.showLoading();
                $.ajax({
                    url: '/ranking/get/record',
                    type: 'post',
                    data: '',
                    async: true,
                    headers: JSON.parse(header),
                    // headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"91ea601eb3814402af6731b0138bcffa","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        window.xy_web.dismissLoading();
                        if (res.success) {
                            layer.msg('领取成功！');
                            that.getRank(1);
                        }else {
                            layer.msg(res.message);
                        }
                    },
                    error: function () {
                        layer.msg('不好意思，请重新领取！');
                        window.xy_web.dismissLoading();
                    }
                });
            },

            scrollToRank:function(e){
                document.documentElement.scrollTop = 500;
                document.body.scrollTop = 500;
            },



            onScroll:function(){
                this.isChange = document.documentElement.scrollTop>40;
                // console.log('scroll:',document.documentElement.scrollTop,this.isChange)
            },

            addMore:function(){
                this.current =  this.current+1;
                this.getRank(this.current);
            },

            // 切换周、日榜单
            changeType:function(e){
                this.typeIndex = e;
                this.current = 1;
                this.rankList = [];
                this.getRank(1)
            },

            // 获取当前时间
            getCurrentTime:function(time){
                var dateee = new Date(time).toJSON();
                var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
                return date
            },


            // 格式化显示时间
            transformTime:function(time){
                var date = this.getCurrentTime(time);
                var d = date.split(' ');
                return d[1]
            },

            gotoHistory:function(){
                window.location.href =  "/ranking/historyRank?type=" + this.typeIndex;
            },
            //获取日周榜的奖励值
            getRewardMoney:function(){
                var that=this;
                $.ajax({
                    url: '/ranking/getRewardMoney',
                    type: 'post',
                    data: '',
                    async: true,
                    dataType: "json",
                    success: function (res) {
                        if (res.success) {
                            that.rewardConfig=res.data;
                        }
                    }
                });
            }

        }
    });
    function date(format, timestamp){
        var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date());
        var pad = function(n, c){
            if((n = n + "").length < c){
                return new Array(++c - n.length).join("0") + n;
            } else {
                return n;
            }
        };
        var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"};
        var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var f = {
            // Day
            d: function(){return pad(f.j(), 2)},
            D: function(){return f.l().substr(0,3)},
            j: function(){return jsdate.getDate()},
            l: function(){return txt_weekdays[f.w()]},
            N: function(){return f.w() + 1},
            S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'},
            w: function(){return jsdate.getDay()},
            z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0},

            // Week
            W: function(){
                var a = f.z(), b = 364 + f.L() - a;
                var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1;
                if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){
                    return 1;
                } else{
                    if(a <= 2 && nd >= 4 && a >= (6 - nd)){
                        nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31");
                        return date("W", Math.round(nd2.getTime()/1000));
                    } else{
                        return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0);
                    }
                }
            },

            // Month
            F: function(){return txt_months[f.n()]},
            m: function(){return pad(f.n(), 2)},
            M: function(){return f.F().substr(0,3)},
            n: function(){return jsdate.getMonth() + 1},
            t: function(){
                var n;
                if( (n = jsdate.getMonth() + 1) == 2 ){
                    return 28 + f.L();
                } else{
                    if( n & 1 && n < 8 || !(n & 1) && n > 7 ){
                        return 31;
                    } else{
                        return 30;
                    }
                }
            },

            // Year
            L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0},
            //o not supported yet
            Y: function(){return jsdate.getFullYear()},
            y: function(){return (jsdate.getFullYear() + "").slice(2)},

            // Time
            a: function(){return jsdate.getHours() > 11 ? "pm" : "am"},
            A: function(){return f.a().toUpperCase()},
            B: function(){
                // peter paul koch:
                var off = (jsdate.getTimezoneOffset() + 60)*60;
                var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off;
                var beat = Math.floor(theSeconds/86.4);
                if (beat > 1000) beat -= 1000;
                if (beat < 0) beat += 1000;
                if ((String(beat)).length == 1) beat = "00"+beat;
                if ((String(beat)).length == 2) beat = "0"+beat;
                return beat;
            },
            g: function(){return jsdate.getHours() % 12 || 12},
            G: function(){return jsdate.getHours()},
            h: function(){return pad(f.g(), 2)},
            H: function(){return pad(jsdate.getHours(), 2)},
            i: function(){return pad(jsdate.getMinutes(), 2)},
            s: function(){return pad(jsdate.getSeconds(), 2)},
            //u not supported yet

            // Timezone
            //e not supported yet
            //I not supported yet
            O: function(){
                var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4);
                if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;
                return t;
            },
            P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))},
            //T not supported yet
            //Z not supported yet

            // Full Date/Time
            c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()},
            //r not supported yet
            U: function(){return Math.round(jsdate.getTime()/1000)}
        };

        return format.replace(/[\ ]?([a-zA-Z])/g, function(t, s){
            if( t!=s ){
                // escaped
                ret = s;
            } else if( f[s] ){
                // a date function exists
                ret = f[s]();
            } else{
                // nothing special
                ret = s;
            }
            return ret;
        });
    }

    Vue.filter('score', function (value) {
        var str;
        if(value){
            str="奖"+value/100+"元";
        }else {
            str="-";
        }
        return str;

    })
</script>
